<script setup lang="ts">
import useUserStore from '@/store/user'
import { getHeaderImage } from '@/utils/common'

const userStore = useUserStore()

const OBJ = {
    other: [
        {
            label: '地址管理',
            icon: 'position',
            url: 'pages/address/index'
        },
        {
            label: '用户指南',
            icon: 'guide',
            url: 'pages/index/guide'
        },
        {
            label: '意见反馈',
            icon: 'suggest',
            url: 'pages/feedback/index'
        },
        {
            label: '设置',
            icon: 'setting',
            url: 'pages/setting/index'
        }
    ]
}

const { statusBarHeight } = uni.getSystemInfoSync()

const userphone = computed(() => uni.$util.hidePhone(userStore.userInfo.phone || '17612341234'))

const data = reactive({
    cumulative: '',
    estimate: 0,
    formalities: 0
})

const navto = (url: string, params = {}) => uni.$util.goToPage({ url, params })
</script>
<template>
    <view class="user-container">
        <view class="header-box" :style="{ paddingTop: `${(statusBarHeight as number) * 2 + 20}rpx` }">
            <view class="title">我的</view>
            <view class="flex user-box" @click="navto('pages/mine/info')">
                <view class="headimg">
                    <image class="img" :src="getHeaderImage(userStore.userInfo.head_image)" mode="widthFix" />
                </view>
                <view class="flex-start-evenly column">
                    <view class="name">{{ userStore?.userInfo?.nickname || '' }}</view>
                    <view class="phone">{{ userphone }}</view>
                </view>
                <view class="flex1 flex-center-end">
                    <u-icon name="arrow-right" size="14" color="#fff" />
                </view>
            </view>
            <view class="options flex-center-evenly">
                <view class="flex" @click="navto('pages/mine/wallet')">
                    <image src="http://cdn-pos.lingji.vip/static/icon/mine/kb.png" mode="heightFix" />
                    <text>钱包</text>
                </view>
                <view class="options-line"></view>
                <view class="flex" @click="navto('pages/mine/revenue')">
                    <image src="http://cdn-pos.lingji.vip/static/icon/mine/sr.png" mode="heightFix" />
                    <text>收入明细</text>
                </view>
            </view>
        </view>

        <view class="report">
            <view class="report-title">我的省钱报告</view>
            <view class="flex" style="margin-bottom: 32rpx">
                <view style="margin-right: 100rpx">
                    <view class="report-tip">累计节省手续费</view>
                    <u-count-to ref="uCountTo" :end-val="data.formalities" color="#fff" font-size="36rpx" />
                </view>
                <view style="margin-right: auto">
                    <view class="report-tip">预计最高还能省</view>
                    <u-count-to ref="uCountTo" :end-val="data.estimate" color="#fff" font-size="36rpx" />
                </view>
            </view>
            <view class="report-tip" style="color: #fff">
                <text>累计综合收款费率</text>
                <text class="report-price">{{ data.cumulative }}%</text>
            </view>
        </view>

        <view class="option-list">
            <view class="option-list-head flex-center-between">
                <view class="option-list-head-title">我的订单</view>
                <view class="option-list-head-tip flex" @click="navto('pages/order/list')">
                    <text>查看全部</text>
                    <u-icon name="arrow-right" size="16" color="#DEDEDE" />
                </view>
            </view>
            <view class="option-list-body">
                <view class="flex column" @click="navto('pages/order/list', { status: 'unpaid' })">
                    <view class="img-box bg flex">
                        <image src="http://cdn-pos.lingji.vip/static/icon/mine/besent.png" mode="widthFix" />
                    </view>
                    <view class="text">待付款</view>
                </view>
                <view class="flex column" @click="navto('pages/order/list', { status: 'paid' })">
                    <view class="img-box bg flex">
                        <image src="http://cdn-pos.lingji.vip/static/icon/mine/unsend.png" mode="widthFix" />
                    </view>
                    <view class="text">待发货</view>
                </view>
                <view class="flex column" @click="navto('pages/order/list', { status: 'shipped' })">
                    <view class="img-box bg flex">
                        <image src="http://cdn-pos.lingji.vip/static/icon/mine/received.png" mode="widthFix" />
                    </view>
                    <view class="text">待收货</view>
                </view>
                <view class="flex column" @click="navto('pages/order/list', { status: 'finished' })">
                    <view class="img-box bg flex">
                        <image src="http://cdn-pos.lingji.vip/static/icon/mine/completed.png" mode="widthFix" />
                    </view>
                    <view class="text">已完成</view>
                </view>
            </view>
        </view>

        <view class="option-list wb">
            <view class="option-list-head flex-center-between">
                <view class="option-list-head-title">其它</view>
            </view>
            <view class="option-list-body">
                <block v-for="(v, k) of OBJ.other" :key="k">
                    <view class="flex column" @click="navto(v.url)">
                        <view class="img-box flex">
                            <image :src="`http://cdn-pos.lingji.vip/static/icon/mine/${v.icon}.png`" mode="widthFix" />
                        </view>
                        <view class="text">{{ v.label }}</view>
                    </view>
                </block>
            </view>
        </view>

    </view>
</template>

<style scoped lang="scss">
.user-container {
    background-color: #fff;

    .header-box {
        width: 100%;
        background-image: url(http://cdn-pos.lingji.vip/static/images/mine/bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 24rpx;

        .title {
            font-size: 32rpx;
            font-weight: 500;
            color: #fff;
            text-align: center;
        }

        .user-box {
            width: 100%;
            padding: 0 32rpx;
            margin-top: 48rpx;
            margin-bottom: 46rpx;
            align-items: stretch;

            .headimg {
                width: 112rpx;
                height: 112rpx;
                border-radius: 50%;
                background-clip: content-box;
                background-color: #000000a6;
                border: 10rpx solid rgba(255, 255, 255, 0.3);
                overflow: hidden;
                position: relative;
                margin-right: 22rpx;

                > .img {
                    width: 120%;
                    position: absolute;
                    top: -10%;
                    left: -10%;
                }
            }

            .name {
                font-size: 32rpx;
                font-weight: 400;
                color: #fff;
            }

            .phone {
                font-size: 14px;
                font-weight: 400;
                color: #fff;
            }
        }

        > .options {
            image {
                min-width: 32rpx;
                height: 36rpx;
                margin-right: 24rpx;
            }

            text {
                color: #fff;
                font-size: 28rpx;
                font-weight: 400;
                letter-spacing: 0rpx;
            }

            .options-line {
                width: 0rpx;
                height: 48rpx;
                border-right: 2rpx solid #ffffff2e;
            }
        }
    }

    .report {
        width: calc(100% - 56rpx);
        margin: 28rpx 28rpx 8rpx;
        border-radius: 8rpx;
        padding: 26rpx 26rpx 28rpx;
        background-image: url(http://cdn-pos.lingji.vip/static/images/mine/bg1.png);
        background-repeat: no-repeat;
        background-size: cover;

        &-title {
            color: #fff;
            text-align: left;
            font-size: 36rpx;
            font-weight: bold;
            font-style: oblique;
            line-height: 46rpx;
            letter-spacing: 2rpx;
            margin-bottom: 24rpx;
        }

        &-tip {
            font-size: 20rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 29rpx;
            color: #ffe9d4;
            text-align: left;
        }
    }

    .option-list {
        padding: 22rpx 28rpx 40rpx;
        border-bottom: 16rpx solid #f5f5f5;

        &.wb {
            border-color: #fff;
        }

        &-head {
            margin-bottom: 30rpx;

            &-title {
                color: #333;
                font-size: 32rpx;
                font-weight: 400;
                line-height: 46rpx;
                letter-spacing: 0rpx;
            }

            &-tip {
                color: #a6a6a6;
                font-size: 24rpx;
                font-weight: 400;
                letter-spacing: 0rpx;
                line-height: 35rpx;
            }
        }

        &-body {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            row-gap: 30rpx;

            .img-box {
                width: 80rpx;
                height: 80rpx;
                border-radius: 16rpx;

                &.bg {
                    background: #f5f8ff;
                }

                image {
                    width: 58rpx;
                }
            }

            .text {
                color: #333;
                font-size: 26rpx;
                font-weight: 400;
                text-align: center;
                line-height: 38rpx;
                letter-spacing: 0rpx;
                margin-top: 4rpx;
            }
        }
    }
}
</style>
